<!-- 新增研究中心弹框 -->
<template>
  <a-modal
    width="80%"
    title="添加研究中心"
    :visible="visible"
    :confirm-loading="submitting"
    @cancel="handleCancel(0)"
    @ok="clickSaveCenter"
  >
    <!-- 研究中心基本信息 -->
    <a-descriptions title="研究中心基本信息"></a-descriptions>
    <a-form-model :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="formRules" ref="formRef">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="中心编号" prop="researchCenterNo">
            <a-input v-model="formData.researchCenterNo" placeholder="请输入中心编号"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="选择医院" prop="orgId">
            <a-select @change="handleHospitalSelect" v-model="formData.orgId">
              <a-select-option v-for="item in hospitalList" :key="item.id" :value="item.id">{{
                item.orgName
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="英文名称">
            <a-input v-model="formData.enName" placeholder="请输入英文名称"></a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="短名称">
            <a-input v-model="formData.shortName" placeholder="请输入短名称"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="选择科室">
            <a-select
              mode="multiple"
              placeholder="请先选择医院"
              v-model="hospitalListView"
              @change="handleDepartmentChange"
              allowClear
            >
              <a-select-option v-for="item in departmentList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="中心状态">
            <a-select v-model="formData.active" allowClear>
              <a-select-option v-for="item in $const.RESEARCH_CENTER_STATUS" :key="item.value" :value="item.value">{{ item.desc }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="选择crc">
            <a-select
              placeholder="请先选择crc"
              v-model="crcListView"
              @change="handleCrcChange"
              allowClear
            >
              <a-select-option v-for="item in teamCrcList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- <div style="margin-bottom: 20px">
      <a-button type="primary" :loading="submitting" @click="clickSaveCenter">保存研究中心</a-button>
    </div> -->
  </a-modal>
</template>

<script>
import monitor from '@/utils/monitor'
import addCenterModal from '@/monitor/views/overview/detail/responsible/components/members/addCenterModal.js'

import { addCenter, getListCrc } from '@/api/overview/member'
import { getOriginationList, listOrgDepts } from '@/api/common'
// import { list } from '@/api/overview/subject'

const watch = monitor(addCenterModal)
export default {
  name: 'AddCenterModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      confirmLoading: false,
      modalVisible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      queryParamMember: {
        resId: null
      },
      formData: {
        proId: this.$route.query.id,
        enName: null,
        shortName: null
      },
      formRules: {
        researchCenterNo: [
          { required: true, message: '请输入中心编号', trigger: 'change' },
          { pattern: /^[0-9a-zA-Z_]{1,}$/, message: '中心编号只能数字和英文' }
        ],
        orgId: [{ required: true, message: '请选择医院', trigger: 'change' }],
        identifier: [{ required: true, message: '请输入编号', trigger: 'change' }]
      },
      hospitalList: [],
      departmentList: [],
      teamCrcList: [],
      hospitalListView: [], // 可以多选的科室，仅用于展示 作用：对话框关闭时重置显示为空
      crcListView: [], // 选择的crc
      submitting: false
    }
  },
  created () {
    this.getHospitalList()
    this.getListCrc()
  },
  methods: watch({
    // 请求医院列表
    getHospitalList () {
      getOriginationList().then(res => {
        this.hospitalList = res.filter(item => parseInt(item.type) === 2) // 获取的列表中type值为2的是医院
      })
    },
    // 获取crc列表
    getListCrc () {
      getListCrc({ proId: this.$route.query.id }).then(res => {
        this.teamCrcList = res
      })
      .catch(() => {})
    },
    // 请求科室列表
    listOrgDepts (val) {
      listOrgDepts({ orgId: val })
        .then(res => {
          console.log(res, '通过医院获取的科室')
          this.departmentList = res
          // this.departmentList = res.filter(item => parseInt(item.type) === 2) // 获取的列表type值为2的是科室
        })
        .catch(() => {})
    },
    // 医院选择下拉改变
    handleHospitalSelect (val) {
      const target = this.hospitalList.find(item => Number(item.id) === Number(val))
      this.formData.enName = target.englishName
      this.formData.shortName = target.shortName
      // this.formData.orgId = val
      this.listOrgDepts(val)
      this.formData.orgDeptId = [] // 将此前选的科室清空
      this.hospitalListView = []
      console.log(val, '选择的医院')
    },
    // 科室选择改变
    handleDepartmentChange (value) {
      this.formData.orgDeptId = value
      console.log(value, '选择的科室')
    },
    handleCrcChange (value) {
      this.formData.teamIdP = value
    },
    // 点击保存研究中心
    clickSaveCenter () {
      this.addCenterPoint()
      this.$refs.formRef.validate(valid => {
        if (!valid) {
          this.$message.error('必选项未填写完整')
          return false
        }
        let commitData = {}
        if (this.formData.orgDeptId) {
          // const obj = JSON.stringify(JSON.parse(this.formData))
          const obj = JSON.parse(JSON.stringify(this.formData))
          obj.orgDeptId = obj.orgDeptId.toString()
          obj.orgDeptName = this.departmentList.filter(item => obj.orgDeptId.indexOf(item.id) >= 0).map(item => item.name).join()
          commitData = obj
        } else {
          const { orgDeptId, ...obj } = { ...this.formData }
          console.log(this.formData, '*********')
          commitData = obj
        }
        if (this.formData.teamIdP) {
          commitData.teamIdP = this.formData.teamIdP.toString()
        } else {
          delete commitData.teamIdP
        }
        this.submitting = true
        addCenter({ ...commitData })
          .then(res => {
            this.submitting = false
            this.$message.success('研究中心新增成功')
            this.queryParamMember.resId = res
            this.handleCancel(1)
          })
          .catch(() => {
            this.submitting = false
          })
      })
    },
    // 点击取消 取消新增
    handleCancel (val) {
      this.$emit('completeAdd', val)
      setTimeout(() => {
        this.resetForm()
      }, 500)
    },
    // 去除校验，重置表单
    resetForm () {
      this.$refs.formRef.resetFields()
      this.hospitalListView = []
      this.crcListView = []
      this.formData = { proId: this.$route.query.id }
      this.queryParamMember = this.$options.data().queryParamMember
      // this.loadData()
      this.$forceUpdate()
    },
    // 添加研究中心埋点
    addCenterPoint () {},
    // 查看团队成员详情埋点
    viewMemberDetail () {}
  })
}
</script>
<style scoped lang="less">
.title {
  line-height: 32px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
}
</style>
